<template>
	<view class="">
		<!-- 公共头部 -->
		<head-top></head-top>
		<!-- 轮播 -->
		<view class="swiper-container">
			<swiper class="hd-swiper" @change="bannerChange" circular="true" autoplay="true" interval="3000">
				<swiper-item class="hd-swiper-item" v-for="(item,index) in bannerList" :key="index">
					<image :src="item" />
				</swiper-item>
			</swiper>
			<view class="swiper-int-box">
				<view class="swiper-int">
					<view v-for="(item,index) in bannerList" :class="{active:index==bannerActive}" :key="index"></view>
				</view>
			</view>
		</view>
		<!-- 轮播导航栏 -->
		<view class="banner-navlist">
			<view>
				<text class="hd-icon c1">&#xe69b;</text><text>正品保护</text>
			</view>
			<view>
				<text class="hd-icon c2">&#xe616;</text><text>隐私发货</text>
			</view>
			<view>
				<text class="hd-icon c3">&#xe63d;</text><text>货到付款</text>
			</view>
			<view>
				<text class="hd-icon c4">&#xe605;</text><text>贴心服务</text>
			</view>
		</view>
		<!-- 新增选项卡 -->
		<view class="newTab-nav"> 
			<view :class="{active:navActive==0}" @click="setTabNav(0)">最新上架</view>
			<view :class="{active:navActive==1}" @click="setTabNav(1)">热销商品</view>
			<view :class="{active:navActive==2}" @click="setTabNav(2)">口碑专区</view>
		</view>
		<view class="newTab-list">
			<view class="newTab-list-item" v-if="navActive==0" v-for="(item,index) in newGoodsList" :key="index" @click="navigateGoods(item.id)">
				<image :src="item.logo"/>
				<view class="h3">{{item.title}}</view>
				<view class="div">
					<view class="newTab-price p">￥{{item.price}}</view>
					<view class="newTab-rote p"><text class="hd-icon">&#xe6af;</text>{{item.pjnum}}人评价</view>
				</view>
			</view>
			<view class="newTab-list-item" v-if="navActive==1" v-for="(item,index) in salesGoodsList" :key="index" @click="navigateGoods(item.id)">
				<image :src="item.logo"/>
				<view class="h3">{{item.title}}</view>
				<view class="div">
					<view class="newTab-price p">￥{{item.price}}</view>
					<view class="newTab-rote p"><text class="hd-icon">&#xe6af;</text>{{item.pjnum}}人评价</view>
				</view>
			</view>
			<view class="newTab-list-item" v-if="navActive==2" v-for="(item,index) in reviewsGoodsList" :key="index" @click="navigateGoods(item.id,'roteid')">
				<image :src="item.logo"/>
				<view class="h3">{{item.title}}</view>
				<view class="div">
					<view class="newTab-price p">￥{{item.price}}</view>
					<view class="newTab-rote p"><text class="hd-icon">&#xe6af;</text>{{item.pjnum}}人评价</view>
				</view>
			</view>
		</view>
		<!-- 分类商品 -->
		<view class="goods-home-nav-cont">
			<view class="goods-home-nav-title">
				<text class="hd-icon">&#xe696;</text>
				<text>分类</text>
			</view>
			<scroll-view scroll-x class="goods-home-nav-list">
				<view> 
					<view class="goods-home-nav-list-item" @click="navChange(index)" v-for="(item,index) in MenuCategory" :key="index" :class="{active:menuActive==index}">{{item.name}}</view>
				</view>
			</scroll-view>
			<text class="goods-home-nav-all" @click="navigateTo('/pages/goods/index')">全部</text>
		</view>
		
		<!-- 商品区域块 -->
        <view class="goods-home-content" v-for="(item,index) in category" :key="index" v-if="menuActive==-1">
        	<view class="h2">
        		<view class="span">{{item.name}}</view>
        	</view>
        	<view class="goods-home-content-tag-list">
        		<view class="li" @click="navigateTo(`/pages/goods/index?cat_id=${itemTwo.id}`)" v-for="(itemTwo,indexTwo) in item.child" :key="indexTwo">{{itemTwo.name}}</view>
        	</view>
        	<view class="goods-home-content-goodslist">
        		<view class="li" v-for="(itemGoods,indexGoods) in item.new_goods" :key="indexGoods"  @click="navigateGoods(itemGoods.id)">
        			<image :src="itemGoods.logo"/>
        			<view class="h3">{{itemGoods.title}}</view>
        			<view class="div">
        				<view class="g-price">￥{{itemGoods.price2}}</view>
        				<view class="g-rote">销量{{itemGoods.month_sales_count}}笔 | {{itemGoods.pjnum}}评论</view>
        			</view>
        		</view>
        	</view>
        </view>
			<view class="goods-home-content" v-for="(item,index) in category" :key="index" v-if="menuActive==index">
				<view class="h2">
					<view class="span">{{item.name}}</view>
				</view>
				<view class="goods-home-content-tag-list">
					<view class="li" @click="navigateTo(`/pages/goods/index?cat_id=${itemTwo.id}`)" v-for="(itemTwo,indexTwo) in item.child" :key="indexTwo">{{itemTwo.name}}</view>
				</view>
				<view class="goods-home-content-goodslist">
					<view class="li" v-for="(itemGoods,indexGoods) in item.new_goods" :key="indexGoods"  @click="navigateGoods(itemGoods.id)">
						<image :src="itemGoods.logo"/>
						<view class="h3">{{itemGoods.title}}</view>
						<view class="div">
							<view class="g-price">￥{{itemGoods.price2}}</view>
							<view class="g-rote">销量{{itemGoods.month_sales_count}}笔 | {{itemGoods.pjnum}}评论</view>
						</view>
					</view>
				</view>
			</view>
		<!-- 资讯 -->
		<view class="new-news">
			<view class="new-news-title">
				<view class="h3">最新资讯</view>
				<text class="hd-icon i">&#xe601;</text>
			</view>
			<view class="new-news-hot" @click="navigateTo('/pages/information/details?id='+newsTop.id)">
				<image :src="newsTop.logo"/>
				<view class="h3">{{newsTop.title}}</view>
			</view>
			<view class="new-news-list">
				<view class="li" v-for="(item,index) in newsListByIndex" :key="index" v-if="index>0" @click="navigateTo('/pages/information/details?id='+item.id)">
					<view class="h3">{{item.title}}</view>
					<view class="p">[{{item.addtime}}]</view>
				</view>
			</view>
			<view class="new-news-show" @click="navigateTo('/pages/information/index')">更多资讯<text class="hd-icon">&#xe601;</text></view>
		</view>	
		<!-- 热门问答 -->
		<view class="new-news">
			<view class="new-news-title">
				<view class="h3">热门问答</view>
				<text class="hd-icon i">&#xe601;</text>
			</view>
			<view class="que-qa">
				<view class="li" v-for="(item,index) in answerListByIndex" :key="index" @click="navigateTo('/pages/answers/details?id='+item.id)">
					<view class="div">
						<view class="h3"><text class="span">Q</text>{{item.title}}</view>
						<view calss="p"><text class="span">{{item.count||0}}</text>个回答</view>
					</view>
					<view class="eqs"><text class="span">A</text>{{item.answer}}</view>
				</view>
			</view>
			<view class="new-news-show" @click="navigateTo('/pages/answers/index')">更多问答<text class="hd-icon">&#xe601;</text></view>
		</view>	
		<!-- 热评产品 -->
		<view class="new-news">
			<view class="new-news-title">
				<view class="h3">热评产品</view>
				<text class="hd-icon i">&#xe601;</text>
			</view>
			<view class="new-news-hot" v-for="(item,index) in hotCommentGoodsList" :key="index" @click="navigateGoods(item.id,'roteid')">
				<image :src="item.logo"/>
				<view>
					<view class="h3">{{item.title}}</view>
					<view class="hot-rotes">
						<view class="h4">{{item.nickname}}的评论</view>
						<view class="p">发表于 {{item.pingjiatime}}</view>
					</view>
				</view>	
			</view>
			<view class="new-news-show" @click="navigateTo('/pages/reputation/index')">更多热评<text class="hd-icon">&#xe601;</text></view>
		</view>	
		<fab :topBtn="isTopBtn"></fab>
		<foot-bottom></foot-bottom>
		
	</view>
</template>

<script>
	import footBottom from '@/components/footBottom'; //公共底部
	import fab from '@/components/fab' //公共右侧菜单
	import { getIndex, getClass } from '@/api/index';  //首页API
	export default {
		data() {
			return {
				menuActive:-1,
				navActive:0,
				isTopBtn: false,
				bannerActive: 0,
				bannerList: [],
				newGoodsList: [],
				salesGoodsList: [],
				reviewsGoodsList: [],
				category: [],
				newsListByIndex:[],
				answerListByIndex:[],
				hotCommentGoodsList:[],
				brandListByIndex:[],
				siteInfo:[],
				MenuCategory:[],
                newsTop:'',
			}
		},
		components: {
			footBottom,
			fab
		},
		onShow() {
			getClass().then((res) => {
				this.MenuCategory = res.data.datas;
			})
			getIndex().then((res) => {
				const { 
					newGoodsList, 
					salesGoodsList, 
					reviewsGoodsList, 
					category,
					newsListByIndex,
					answerListByIndex,
					hotCommentGoodsList,
					brandListByIndex,
					siteInfo
				} = res.data.datas;
				this.$Shop.setStorage('classfiy',JSON.stringify(category))
				this.newGoodsList = newGoodsList // 最新上架
				this.salesGoodsList = salesGoodsList // 热销商品
				this.reviewsGoodsList = reviewsGoodsList // 口碑专区
				this.category = category // 分类菜单及商品
				this.newsListByIndex = newsListByIndex // 最新资讯
				this.answerListByIndex = answerListByIndex // 热门问答
				this.hotCommentGoodsList = hotCommentGoodsList // 热评产品 
				this.brandListByIndex = brandListByIndex //推荐品牌
				this.siteInfo = siteInfo // 底部二维码
                this.newsTop = this.newsListByIndex[0]
				const { banner } = res.data.datas; //广告图
				this.bannerList = [];
				for (let key in banner) {
					if (banner[key].includes('https')) {
						this.bannerList.push(banner[key])
					}
				}
			})
		},
		onPageScroll(e) {
			if (e.scrollTop >= 400) {
				this.isTopBtn = true
			}
			if (e.scrollTop <= 100) {
				this.isTopBtn = false
			}
		},
		methods: {
			navChange(index){
				this.menuActive = index
			},
			setTabNav(index){
				this.navActive = index
			},
			navigateGoods(id,type) {
				this.$Shop.navigateGoods(id,type);
			},
			bannerChange(e) {
				this.bannerActive = e.detail.current;
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
            switchTab(url){
                uni.switchTab({
                	url: url
                });
            },
			searchGo(key) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-home-content{
		margin:20rpx  0;
		padding:20rpx;
		background: #fff;
		.h2{
			text-align: center;
			.span{
				color:#f5386a;
				font-size:42rpx;
				display: inline-block;
				&::after{
					margin-left:20rpx;
					display: inline-block;
					content: '';
					width:100rpx;
					height: 1px;
					background: #f5386a;
					top: -0.5rem;
					position: relative;
				}
				&::before{
					margin-right:20rpx;
					display: inline-block;
					content: '';
					width:100rpx;
					height: 1px;
					background: #f5386a;
					top: -0.5rem;
					position: relative;
				}
			}
		}
		.goods-home-content-tag-list{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-top:20rpx;
			.li{
				padding:10rpx 30rpx;
				background: #f5f5f5;
				color:#999;
				font-size:24rpx;
				margin-right:26rpx;
				margin-bottom:20rpx;
				&:nth-of-type(4n){
					margin-right:0;
				}
			}
		}
		.goods-home-content-goodslist{
			padding:20rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.li{
				width:345rpx;
				margin-bottom:20rpx;
				image{
					width:100%;
					height: 345rpx;
				}
				.h3{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					font-size:24rpx;
				}
				.div{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top:40rpx;
					.g-price{
						color:#f5386a;
						font-size:22rpx;
					}
					.g-rote{
						color:#999;
						font-size:22rpx;
					}
				}
			}
		}
	}
	.new-news{
		padding:20rpx;
		background: #fff;
		margin:20rpx 0;
		padding-bottom:0;
		.new-news-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.h3{
				font-size:30rpx;
				color:#1a1a1a;
			}
			.i{
				font-size:22rpx;
				color:#1a1a1a;
			}
		}
		.que-qa{
			.li{
				border-bottom:1px solid #eee;
				padding-bottom:20rpx;
				.eqs{
					margin-top:10rpx;
					.span{
						font-size:22rpx;
						background: #b2b2b2;
						padding:0 8rpx;
						color:#fff;
						margin-right:10rpx;
					}
					color:#b2b2b2;
					font-size:26rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.div{
					display: flex;
					justify-content:space-between;
					align-items: center;
					margin-top:20rpx;
					.p{
						font-size::24rpx;
						color:#b2b2b2;
						.span{
							color:#ed1475;
						}
					}
					.h3{
						display: flex;
						align-items: center;
						width:560rpx;
						font-size:26rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						color:#666;
						.span{
							font-size:22rpx !important;
							background: #ed1475;
							padding:0 8rpx;
							color:#fff;
							margin-right:10rpx;
						}
					}
				}
			}
		}
		.new-news-hot{
			display: flex;
			justify-content: flex-start;
			margin-top:20rpx;
			padding-bottom:20rpx;
			border-bottom:1rpx solid #eee;
			image{
				width:100rpx;
				height: 100rpx;
			}
			.h3{
				width: 588rpx;
				margin-left:20rpx;
				font-size:24rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.hot-rotes{
				width: 588rpx;
				margin-left:24rpx;
				display: flex;
				margin-top:30rpx; 
				justify-content: space-between;
				.h4,.p{
					font-size:22rpx;
					color:#999;
				}
			}
		}
		.new-news-list{
			.li{
				display: flex;
				justify-content: space-between;
				padding:20rpx 0;
				border-bottom:1rpx solid #eee;
				.h3{
					width:540rpx; 
					font-size:24rpx;
				}
				.p{
					width: 170rpx;
					text-align: right;
					font-size:24rpx;
				}
			}
		}
		.new-news-show{
			display: flex;
			padding:20rpx 0;
			justify-content: center;
			align-items: center;
			font-size:22rpx;
		}
	}
	.goods-home-nav-cont{
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin:20rpx 0;
		padding:0 20rpx;
		height:80rpx;
		background: #fff;
		.goods-home-nav-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width:14%;
			font-size:30rpx;
			.hd-icon{
				color:#f03c8c;
				margin-right:4rpx;
			}
		}
		.goods-home-nav-list{
			width:70%;
			overflow: hidden;
			white-space: nowrap;
			height: 80rpx;
			line-height: 80rpx;
			.goods-home-nav-list-item{
				color:#4c4c4c;
				font-size:24rpx;
				padding:0 20rpx;
				display: inline-block;
				position: relative;
				&.active{
					color:#ed1475;
					&::after{
						position:absolute;
						bottom: 0;
						display: block;
						content: '';
						left: 50%;
						transform: translate(-50%,0);
						width:100%;
						height: 4rpx;
						background: #ed1475;
					}
				}
			}
		}
		.goods-home-nav-all{
			width:10%;
			color:#999999;
			font-size:24rpx;
		}
	}
	.newTab-list{
		display:flex;
		justify-content:flex-start;
		padding:30rpx 20rpx;
		background: #fff;
		.newTab-list-item{
			width: 30%;
			padding:0 1.6%;
			image{
				width: 100%;
				height: 200rpx;
			}
			.h3{
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-size:24rpx;
			}
			.div{
				display: flex;
				justify-content: space-between;
				.p{
					font-size:22rpx;
					margin-top:20rpx;
					display: flex;
					align-items: center;
					&.newTab-price{
						color:#f5386a;
					}
					&.newTab-rote{
						color:#999999;
						text{
							color:#ff0909;
						}
					}
				}
			}
		}
	}
	.newTab-nav{
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding-top:30rpx;
		border-bottom: 1px solid #e6e6e6;
		view{
			flex: 1;
			text-align: center;
			font-size:30rpx;
			padding-bottom:20rpx;
			position: relative;
			&.active{
				color:#ed1475;
				&::after{
					position:absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0);
					display: block;
					content: '';
					width:30%;
					height: 4rpx;
					background: #ed1475;
				}
			}
		}
	}
	.banner-navlist{
		display: flex;
		justify-content: space-between;
		view{
			padding:20rpx 0;
			flex:1;
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				font-size:36rpx;
				&.c1{
					color:#95dbaf;
				}
				&.c2{
					color:#f4d587;
				}
				&.c3{
					color:#f7a1c0;
				}
				&.c4{
					color:#f596af;
				}
			}
			text{
				font-size:24rpx;
				color:#b2b2b2;
				margin-left:10rpx;
			}
		}
	}
	.swiper-container {
		position: relative;

		.hd-swiper {
			width: 100%;
			height: 325rpx;
			background: #fff;
			margin-top: 96rpx;

			.hd-swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.swiper-int-box {
			width: 100%;
			position: absolute;
			bottom: 28rpx;
			text-align: center;

			.swiper-int {
				display: inline-block;
				padding: 5px;
				background: rgba(0, 0, 0, .2);
				border-radius: 10px;
				transition-duration: .3s;
				height: 10px;
				line-height: 10px;

				view {
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 0 3px;
					background-color: rgba(255, 255, 255, .5);
					border-radius: 50%;
					transition-duration: .3s;

					&.active {
						background: #fff;
					}
				}
			}
		}
	}

	.menu-list {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 0;
		background: #fff;

		.menu-item {
			width: 20%;
			text-align: center;

			div {
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 100rpx;
				background: #fc5f99;
				color: #fff;
				border-radius: 50%;

				i {
					font-size: 43.75rpx;
				}
			}

			h3 {
				font-size: 25rpx;
				margin-top: 6.25rpx;
			}
		}
	}

	.like-container {
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;

		.title {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 37.5rpx;
				height: 37.5rpx;
				margin-right: 10rpx;
			}

			h3 {
				font-size: 37.5rpx;
			}
		}

		.like-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			li {
				background: #fff;
				width: 326rpx;
				padding: 50rpx 12rpx;
				margin-top: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 347.5rpx;
				}

				h3 {
					font-size: 26rpx;
					margin: 5rpx 0;
					word-break: keep-all;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				p {
					font-size: 26rpx;
					color: #ed1475;
					text-align: center;
				}

				span {
					position: absolute;
					top: 20rpx;
					width: 100rpx;
					text-align: center;
					color: #fff;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					border-radius: 20rpx;
					font-weight: bold;
					left: 50%;
					margin-left: -40rpx;
					background: #8fd01f;
				}
			}
		}
	}

	.hot-container {
		margin: 37.5rpx 0;

		.title {
			padding: 0 18.75rpx;

			h3 {
				font-size: 37.5rpx;
			}
		}

		.hot-list-container {
			background: #fff;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
		}

		.hot-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 18.75rpx;

			li {
				width: 326rpx;
				padding: 50rpx 12rpx;
				margin-top: 20rpx;
				background: #f7f7f7;

				image {
					width: 100%;
					height: 347.5rpx;
				}

				h3 {
					font-size: 26rpx;
					margin: 5rpx 0;
					word-break: keep-all;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				p {
					font-size: 26rpx;
					color: #ed1475;
					text-align: center;
				}
			}
		}
	}

	.ranking-contanier {
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;

		&>a {
			display: block;
			text-align: center;
		}

		.title {
			h3 {
				display: flex;
				justify-content: flex-start;
				font-size: 37.5rpx;
				align-items: center;
			}

			i {
				font-size: 37.5rpx;
				color: #ed1475;
				margin: 0 10rpx;
				margin-top: 4rpx;
			}

			span {
				color: #999;
				font-size: 24rpx;
			}
		}

		.ranking-list {
			margin-top: 25rpx;

			li {
				align-items: center;
				display: flex;
				justify-content: flex-start;
				background: #fff;
				padding: 10rpx;
				margin-bottom: 31.25rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				h3 {
					font-size: 75rpx;
					color: #ed4706;
					font-weight: bold;
					margin: 0 12.5rpx;
				}

				p {
					font-size: 28.75rpx;
					color: #333;
					word-break: keep-all;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}

	.hot-rote-contanier {
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;

		.title {
			h3 {
				font-size: 37.5rpx;
			}
		}

		&>a {
			display: block;
			text-align: center;
		}

		.hot-rote-list {
			margin-top: 25rpx;

			li {
				background: #f0f0f0;
				display: flex;
				justify-content: space-between;
				margin-bottom: 25rpx;

				.hot-rote-project-img {
					width: 262.5rpx;
					height: 210rpx;
				}

				.hot-rote-user {
					width: 410rpx;
					padding: 12rpx;

					.hot-rote-user-desc {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 25rpx;
						line-height: 37.5rpx;
						color: #555;
					}

					.hot-rote-user-info {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin: 12.5rpx 0;

						image {
							width: 62.5rpx;
							height: 62.5rpx;
							border-radius: 50%;
							margin-right: 12.5rpx;
						}

						p {
							color: #999;
							font-size: 24rpx;
						}
					}
				}

				.hot-rote-project {
					display: flex;
					justify-content: space-between;

					p {
						color: #333;
						font-size: 24rpx;

						&:nth-of-type(1) {
							width: 80%;
						}

						&:nth-of-type(2) {
							color: #ed1475
						}
					}
				}
			}
		}
	}

	.questions-contanier {
		margin-top: 25rpx;

		&>a {
			display: block;
			text-align: center;
			margin-top: 25rpx;
		}

		.title {
			h3 {
				font-size: 37.5rpx;
				padding: 0 18.75rpx;
				margin-bottom: 25rpx;
			}
		}

		.questions-list {
			background: #fff;
			padding: 25rpx 18.75rpx;
			padding-top: 10rpx;

			li {
				width: 100%;
				margin-top: 25rpx;

				h3 {
					font-size: 31.2rpx;
					color: #333;
				}

				p {
					padding: 12.5rpx;
					margin-top: 25rpx;
					font-size: 27.5rpx;
					color: #555;
					background: #f0f0f0;
				}
			}
		}
	}

	.new-contanier {
		margin-top: 25rpx;

		&>a {
			display: block;
			text-align: center;
			margin-top: 25rpx;
		}

		.title {
			h3 {
				font-size: 37.5rpx;
				padding: 0 18.75rpx;
				margin-bottom: 25rpx;
			}
		}

		.new-list {
			li {
				background: #fff;
				display: flex;
				justify-content: space-between;
				padding: 23.5rpx 0;

				.new-time {
					width: 125rpx;
					border-right: 1px solid #ddd;
					text-align: center;

					h3 {
						font-size: 28rpx;
						color: #ff6980;
						margin-bottom: 5.8rpx;
					}

					p {
						color: #ff6980;
						font-size: 24rpx;
					}
				}

				.new-desc {
					width: 76%;
					margin-right: 24rpx;

					h3 {
						font-size: 28rpx;
						color: #333;
						word-break: keep-all;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					p {
						color: #999;
						font-size: 24rpx;
						word-break: keep-all;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						margin-top: 6rpx;
					}
				}

				margin-bottom:25rpx;
			}
		}
	}

	.stroll-contanier {
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;

		.title {
			h3 {
				text-align: center;
				font-size: 37.5rpx;
			}
		}

		.stroll-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 25rpx;

			li {
				background: #fff;
				padding: 47rpx 12rpx;
				width: 326rpx;
				margin-bottom: 25rpx;

				image {
					width: 100%;
					height: 327rpx;
				}

				h3 {
					font-size: 26rpx;
					margin: 5rpx 0;
					word-break: keep-all;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				p {
					font-size: 26rpx;
					color: #ed1475;
					text-align: center;
				}
			}
		}
	}

	.brand-contanier {
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;

		.title {
			h3 {
				font-size: 37.5rpx;
				text-align: center;
			}
		}

		.brand-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 25rpx;

			li {
				width: 33.3%;
				text-align: left;
				padding: 12rpx 0;
				white-space: nowrap;
				font-size: 24rpx;
				color: #333;
			}
		}
	}

	.copyright {
		text-align: center;
		font-size: 24rpx;
		color: #333;
		margin-bottom: 148rpx;

		span {
			color: #999;
			margin-right: 15rpx;
		}
	}
</style>
